<template>
  <div class="pay">
      <van-notice-bar
        text="请选择充值额度..."
        left-icon="../static/voice.png"
        />
      <van-cell-group class="pay-form">
        <van-field class="pay-field"
            v-model="name"
            label="充值账户:"
            disabled
        />
        <van-field class="pay-field"
            v-model="amt_remain"
            label="剩余额度:"
            disabled
        />
      </van-cell-group>
      <div class="pay-amt">
        <div class="pay-amount">充值额度:</div>
        <recharge :choose="item.cs" v-on:changeMoney="changeMoney" v-for="(item, index) in chooses" :key="index" :amt="item.amt" :real_amt="item.real_amt"></recharge>
      </div>
      <div class="pay-btn">
        <van-submit-bar
            :loading="loading"
            :price="amt_pay"
            button-text="提交订单"
            @submit="pay"
        />
      </div>
      <back :scroll="false"></back>
  </div>
</template>

<script>
import recharge from '../../components/base/recharge.vue'
import back from '../../components/base/back.vue'
export default {
  name: 'pay',
  comments: 'pay',
  components: {
    recharge,
    back
  },
  data () {
    return {
      name: '小龙',
      amt_pay: 10000,
      amt_remain: 100 + '元',
      loading: false,
      chooses: [
        { amt: '100', real_amt: '110', cs: true },
        { amt: '200', real_amt: '220', cs: false },
        { amt: '300', real_amt: '330', cs: false },
        { amt: '400', real_amt: '440', cs: false },
        { amt: '500', real_amt: '550', cs: false },
        { amt: '600', real_amt: '660', cs: false },
        { amt: '700', real_amt: '770', cs: false }
      ]
    }
  },
  created () {
    if (localStorage.reload === 'done') {
      document.title = '充值中心'
      localStorage.reload = ''
    } else {
      localStorage.reload = 'done'
    }
    // debugger
    // this.$router.path = '/pay/recharge'
  },
  beforeMount () {
    // this.$toast.loading({
    //   mask: true,
    //   message: '加载中...'
    // })
  },
  methods: {
    changeMoney: function (amt) {
      // this.amt_remain = amt + '元'
      this.amt_pay = parseFloat(amt) * 100
      this.chooses.forEach(element => {
        if (element.amt === amt) {
          element.cs = true
        } else {
          element.cs = false
        }
      })
    },
    paySubmit: function (info) {
      function onBridgeReady () {
        WeixinJSBridge.invoke(
          'getBrandWCPayRequest', info,
          function (res) {
            if (res.err_msg === 'get_brand_wcpay_request:ok') {
              this.$router.push({
                name: 'course'
              })
            }
          }
        )
      }
      if (typeof WeixinJSBridge === 'undefined') {
        if (document.addEventListener) {
          document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false)
        } else if (document.attachEvent) {
          document.attachEvent('WeixinJSBridgeReady', onBridgeReady)
          document.attachEvent('onWeixinJSBridgeReady', onBridgeReady)
        }
      } else {
        onBridgeReady()
      }
    },
    // 支付
    pay: function (e) {
      // this.loading = true
      var that = this
      this.$axios.post('/users/' + JSON.parse(localStorage.user).id + '/orders', {
        amount: that.amt_pay,
        real_amount: that.amt_pay,
        type: 'recharge'
      }).then(response => {
        that.$toast.success('充值成功！')
        // that.loading = false
        that.paySubmit(response.data)
      }).catch(error => {
        that.$toast.fail('充值失败！')
        // that.loading = false
        console.log(error)
      })
    }
  }
}
</script>
<style lang="postcss" scoped>
.tip-item{
    height: 80px;
    width: 100%;
    background-color: #2f2828;
    position: relative;
    border-bottom: 1px solid grey;
    overflow: hidden;
}
.item-img{
    height: 60px;
    width: 60px;
    position: absolute;
    border-radius: 50%;
    left: 10px;
    top: 10px;
}
.item-content{
    position: absolute;
    top: 0px;
    left: 95px;
    text-align: left;
    height: 100%;
    color: white;
}
.item-name{
    margin-top: 10px;
    font-weight: bold;
}
.item-desc{
    font-size: 10px;
    text-align: left;
    font-family: fantasy;
    margin-top: 0px;
    color: darkgrey
}
.pay-form,.pay-field{
    background-color: transparent;
    color: #f8f8f8;
}
.pay-amount{
    max-width: 90px;
    flex: 1;
    color: #f8f8f8;
    font-size: 14px;
    text-align: left;
}
.pay-amt{
    padding: 10px 15px;
    position: absolute;
}
.pay-amt div:first-child{
    margin-left: 0px;
}
.pay-btn{
    position: fixed;
    bottom: 0px;
    width: 100%;
    z-index: 999;
}
</style>
